<template>
  <div class="main">
    <cateTabs @handleClick="cateClick"/>

    <van-list v-model="loading" :finished="finished" @load="onLoad">
      <template v-if="tickets.length > 0">
        <MyTicketItem v-for="(item, index) in tickets" :key="index" :ticket="item"/>
      </template>
      <template v-else>
        <template v-if="isLoad">
          <div class="empty-wrap">
            <EmptyTips :image="NoTicketEmpty" mWidth="30" mHeight="30" text="您还没有水票，快去选购吧"/>
            <div class="buy-btn">
              <ActionButton class="blue-btn" text="购买水票" @click="buy"/>
            </div>
          </div>
        </template>
      </template>
    </van-list>
  </div>
</template>

<script>
import api from "../../api";
import ActionButton from "@/components/common/ActionButton";
import MyTicketItem from "@/components/myticket/MyTicketItem";
import EmptyTips from "@/components/common/EmptyTips";
import cateTabs from "@/components/common/cateTabs";
import NoTicketEmpty from "../../assets/common/no-ticket-empty.png";

var onLoadTimer = null;

export default {
  title: "我的水票",
  bodyClass: "gray-bg",
  components: {
    MyTicketItem,
    EmptyTips,
    cateTabs,
    ActionButton
  },
  data() {
    return {
      NoTicketEmpty,
      uid: this.$store.state.uid,
      loading: false,
      finished: false,
      page: 1,
      cate: "0",
      tickets: [],
      isLoad: false
    };
  },
  methods: {
    cateClick(id) {
      console.log(id);

      this.cate = id;
      this.clearList();

      setTimeout(() => {
        this.onLoad();
      }, 100);
    },
    clearList() {
      this.tickets = [];
      this.page = 1;
      this.isLoad = false;
    },
    onLoad() {
      window.clearTimeout(onLoadTimer);
      onLoadTimer = window.setTimeout(() => {
        api.ticket.getMyTickets(
          this.uid,
          this.page,
          this.cate,
          res => {
            this.isLoad = true;
            console.log(res);
            if (res.pager.totalPages <= res.pager.nowPage) {
              this.loading = false;
              this.finished = true;
            }

            if (res.data.list.length < 1) {
              this.finished = true;
            }

            for (var i = 0; i < res.data.list.length; i++) {
              this.tickets.push(res.data.list[i]);
            }
            this.page += 1;
            this.finished = true;
            this.loading = false;
          },
          res => {
            this.loading = false;
            this.finished = true;
            this.$toast(res.msg);
          }
        );
      }, 200);
    },
    buy() {
      this.$routerPush(this, `/pages/homepage/Index`);
    }
  },
  mounted() {
    // this.getMyTicket()
  }
};
</script>

<style lang="less" scoped>
.empty-wrap {
  margin-top: -15vw;
  .buy-btn {
    margin-top: -55vw;
  }
}
</style>